<template>
  <div class="MyShipmentBox">
    <!-- 输入框 -->
    <ul class="input">
      <li>
        <p>主运单号：</p>
        <input
          type="text"
          v-model="params.masterWaybillLike"
          placeholder="请输入主单号"
        />
      </li>
      <li>
        <p>发货单号：</p>
        <input
          type="text"
          v-model="params.deliverCargoNo"
          placeholder="请输入发货单号"
        />
      </li>
      <li>
        <p>发货时间：</p>
        <div>
          <ul @click="show = true">
            <li class="rili">
              <input
                type="text"
                readOnly
                v-model="params.deliverGoodsTimeStart"
                placeholder="请选择时间"
              />
            </li>
            <li class="rili1">
              <p>至</p>
            </li>
            <li class="rili">
              <input
                type="text"
                readOnly
                v-model="params.deliverGoodsTimeEnd"
                placeholder="请选择时间"
              />
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <!-- 按钮 -->
    <div class="button">
      <van-row gutter="20">
        <van-col span="12">
          <van-button
            class="buttonItem1"
            @click="changeParams"
            type="primary"
            block
            >查询</van-button
          >
        </van-col>
        <van-col span="12">
          <van-button
            class="buttonItem2"
            @click="resetParams"
            type="primary"
            block
            >重置</van-button
          >
        </van-col>
      </van-row>
    </div>
    <!-- 日历 -->
    <van-calendar
      v-model="show"
      color="#F29D12"
      type="range"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="onConfirm"
    />
  </div>
</template>

<script>
import Vue from "vue";
import { Calendar } from "vant";
import { dateFormat } from "@/utils/common";

Vue.use(Calendar);
export default {
  data() {
    return {
      show: false,
      params: {
        masterWaybillLike: "",
        deliverGoodsTimeStart: "",
        deliverGoodsTimeEnd: "",
        deliverCargoNo: "",
      },
      minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 1)),
      maxDate: new Date(),
    };
  },
  methods: {
    // 日期选定
    onConfirm(e) {
      this.params = {
        ...this.params,
        deliverGoodsTimeStart: `${dateFormat("YYYY-mm-dd", e[0])} 00:00:00`,
        deliverGoodsTimeEnd: `${dateFormat("YYYY-mm-dd", e[1])} 23:59:59`,
      };
      this.show = false;
    },
    // 重置
    resetParams() {
      this.params = {
        masterWaybillLike: "",
        deliverGoodsTimeStart: "",
        deliverGoodsTimeEnd: "",
        pageNum: 1,
        pageSize: 20,
      };
    },
    // 调用父元素改变参数
    changeParams() {
      this.$emit("changeParams", this.params);
    },
  },
};
</script>

<style lang="scss" scoped>
.MyShipmentBox {
  width: 100%;
  background-color: #fff;

  .input {
    margin: 0;
    width: 100%;
    overflow: hidden;
    padding: 10px 15px 0 15px;
    box-sizing: border-box;

    li {
      display: flex;
      margin-bottom: 10px;

      p {
        //width: 75px;
        font-size: 16px;
        font-weight: 400;
        color: #999999;
        line-height: 30px;
        margin: 0;
      }

      input {
        flex: 1;
        height: 30px;
        background: rgba(233, 236, 239, 0.5);
        border-radius: 18px;
        outline: none;
        border: none;
        box-sizing: border-box;
        padding: 0 10px;
        line-height: 30px;
        font-size: 16px;
        color: #79828a;
      }

      & > div {
        margin: 0;
        flex: 1;

        & > ul {
          width: 100%;
          overflow: hidden;
          list-style: none;
          margin: 0;
          padding: 0;

          .rili {
            width: 45%;
            float: left;

            input {
              width: 100%;
            }
          }

          .rili1 {
            width: 10%;
            float: left;

            p {
              text-align: center;
            }
          }
        }
      }
    }
  }

  .button {
    width: 100%;
    padding: 0 15px 15px 85px;
    box-sizing: border-box;

    .buttonItem1 {
      height: 35px;
      background: #f29d12;
      border-radius: 18px;
      line-height: 35px;
      color: #fff;
      font-size: 16px;
      border: 2px solid #f29d12;
    }

    .buttonItem2 {
      height: 35px;
      background: #fff;
      border-radius: 18px;
      line-height: 35px;
      font-size: 16px;
      color: #333333;
      border: 2px solid #acb7bc;
    }
  }
}
</style>
